<template>
    <div>
        <div class="head">
            <el-form inline label-width="120px" size="small">

                <el-form-item>
                    <el-input placeholder="请输入菜单名称" v-model="searchData.id" @keyup.enter.native="search"
                              style="width: 200px">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="请输入菜单名称" v-model="searchData.menuName" @keyup.enter.native="search"
                              style="width: 200px">
                    </el-input>
                </el-form-item>


                <el-form-item>
                    <el-button icon="el-icon-delete" type="danger" @click="clearForm">重置</el-button>
                    <el-button plain type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                </el-form-item>
            </el-form>

        </div>
        <div class="table-menu">
            <el-table
                    :data="treeData"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="id"
                    border
                    ref="refTable"
                    v-loading="loading"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'} ">
                <el-table-column
                        prop="id"
                        label="菜单ID" align="center" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="parentId"
                        label="父级ID" align="center" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.parentId }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="菜单名称"
                        align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.title | stringTrim }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="icon"
                        label="图标"
                        align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.icon | stringTrim }}</span>
                    </template>
                </el-table-column>


                <el-table-column
                        prop="path"
                        label="路由" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.path | stringTrim }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button plain size="mini" type="success"
                                   @click="openAddDialog(scope.row)">新增
                        </el-button>
                        <el-button plain size="mini" type="warning"
                                   @click="openUpdateDialog(scope.row)">编辑
                        </el-button>
                        <el-button plain size="mini"
                                   type="danger" @click="del(scope.row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog
                    :title="title"
                    :visible.sync="addDialogVisible"
                    width="30%"
                    center>
                <el-form :model="form" :rules="rules" ref="form">
                    <el-form-item label="父级菜单" label-width="80px" v-if="title ==='新增菜单'">
                        <el-input placeholder="父级菜单名称" v-model="choiceNode.title" disabled/>
                    </el-form-item>
                    <el-form-item label="菜单名称" label-width="80px" prop="title">
                        <el-input placeholder="请输入菜单名称" v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="路由地址" label-width="80px" prop="path">
                        <el-input placeholder="请输入路由地址" v-model="form.path"></el-input>
                    </el-form-item>
                    <el-form-item label="权限编码" label-width="80px" prop="permissionCode">
                        <el-input placeholder="请输入权限编码" v-model="form.permissionCode"/>
                    </el-form-item>
                    <el-form-item label="图标" label-width="80px" prop="permissionCode">
                        <el-input placeholder="请输入图标地址" v-model="form.icon"/>
                    </el-form-item>
                    <el-form-item label="菜单排序" prop="sort" label-width="80px">
                        <el-input placeholder="请输入菜单排序" v-model.number="form.sort"/>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="cacleDialog">取 消</el-button>
                    <el-button type="primary" @click="save">确 定</el-button>
                </span>
            </el-dialog>

        </div>
    </div>

</template>
<script>
    import {
        menu_list,
        menu_add,
        menu_update,
        menu_del,
        menu_detail
    } from "@/api/sysmenu";

    export default {
        data() {
            return {
                treeData: [],
                defaultProps: {
                    children: "children",
                    label: "title"
                },
                choiceNode: {
                    id: 0,
                    title: "-"
                },
                addDialogVisible: false,
                form: {
                    path: "",
                    title: "",
                    icon: "",
                    sort: 0,
                    permissionCode: ""
                },
                searchData: {
                    menuName: "",
                    id: ""
                },
                rules: {
                    path: [{required: true, message: "请输入路由", trigger: "blur"}],
                    title: [{required: true, message: "请输入名称", trigger: "blur"}],
                    sort: [
                        {
                            required: true,
                            type: "number",
                            message: "请输入排序",
                            trigger: "blur"
                        }
                    ]
                },
                loading: false,
                expand: false,
                title: "新增菜单"
            };
        },
        mounted() {
            this.getData();
        },
        methods: {
            del(id) {
                this.$confirm("是否删除该菜单?", "操作提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    menu_del(id).then(res => {
                        if (res.status === 200) {
                            this.getData();
                            this.$message.success("删除成功");
                        }
                    });
                });
            },

            search() {
                this.getData();
            },
            cacleDialog() {
                this.addDialogVisible = false;

            },
            submit() {
                this.$refs["form"].validate(valide => {
                    if (valide) {
                        this.loading = true;
                        if (this.title === "新增菜单") {
                            this.form.parentId = this.choiceNode.id;
                            menu_add(this.form).then(res => {
                                if (res.status === 200) {
                                    this.$message.success("新增成功");
                                    this.getData();
                                    this.loading = false;
                                    this.$refs["form"].resetFields();
                                }
                            });
                        }
                        if (this.title === "编辑菜单") {
                            menu_update(this.choiceNode.id, this.form).then(res => {
                                if (res.status === 200) {
                                    this.$message.success("编辑成功");
                                    this.getData();
                                    this.loading = false;
                                    this.$refs["form"].resetFields();
                                }
                            });
                        }
                    }
                });
            },
            getData() {
                this.loading = true;
                let params = {};
                params.id = this.searchData.id;
                params.menuName = this.searchData.menuName;
                menu_list(params).then(res => {
                    if (res.status === 200) {
                        this.treeData = res.data;
                        this.loading = false;
                    }
                });
            },
            clearForm() {
                this.searchData = {};
                this.getData();
            },
            //打开新增弹窗
            openAddDialog(row) {
                this.choiceNode.title = row.title;
                this.addDialogVisible = true;
                this.choiceNode.id = row.id;
            },
            //打开编辑弹窗
            openUpdateDialog(row) {
                this.title = "编辑弹窗";
                this.addDialogVisible = true;
                menu_detail(row.id).then(res => {
                    if (res.status === 200) {
                        this.form = res.data;
                    }
                })
            },
            save() {
                let params = {};
                params.parentId = this.choiceNode.id;
                params.permissionCode = this.form.permissionCode;
                params.icon = this.form.icon;
                params.path = this.form.path;
                params.title = this.form.title;
                params.sort = this.form.sort;
                menu_add(params).then(res => {
                    if (res.status === 200) {
                        this.$message.success("添加成功");
                        this.addDialogVisible = false;
                        this.getData();
                    }
                })
            }
        }
    };
</script>
<style lang='less'>
    .container::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }
</style>
